<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <transition-group
        enter-active-class="animate__animated animate__fadeInLeftBig"
        leave-active-class="animate__animated animate__fadeOutDownBig"
      >
        <component
          :key="route.fullPath"
          v-if="route.meta.KeepAlive"
          :is="Component"
        />
      </transition-group>
    </keep-alive>
    <component
      :key="route.fullPath"
      v-if="!route.meta.KeepAlive"
      :is="Component"
    />
  </router-view>
</template>

<script setup>
  import { useRoute } from 'vue-router'

  const route = useRoute()
</script>

<style lang="less">
  .animate__animated.animate__fadeOutDownBig {
    --animate-duration: 0.8s;
  }
  .animate__animated.animate__fadeInDownBig {
    --animate-duration: 0.8s;
  }
</style>
